<template>
  <view class="shopFooter">
    <view class="seize" />
    <view class="footer">
      <view class="operation">
        <view @click="goCustomer">
          <text class="icon-bottom font_family icon-earphone_tongyong_1" />
          联系客服
        </view>
        <view v-if="newCollInfo.isCollect == 1" @click="CollectionShop">
          <image src="/shopDetail/static/image/collAc.png" />
          取消
        </view>
        <view v-else @click="CollectionShop">
          <image src="/shopDetail/static/image/coll.png" />
          收藏
        </view>
        <view @click="shopCarPage">
          <text class="icon-bottom font_family icon-a-shoppingcart_tongyong_1" />
          <u-badge v-if="newCartCount > 0" :type="type" max="99" bg-color="#FF5533" :value="newCartCount" :absolute="true" :offset="[0, -8]" />
          购物车
        </view>
      </view>
      <view class="shopPay">
        <view :class="newSaleFlag ? 'button disableNone addCar' : 'button addCar'" @click="addCar">加入购物车</view>
        <view style="margin-left: 16rpx;" :class="newSaleFlag ? 'button disableNone' : 'button'" @click="buy">立即购买</view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { cannotActionGoodsValidate } from '@/common/common'
export default {
  props: {
    saleFlag: {
      type: Boolean,
      default: false
    },
    cartCount: {
      type: Number,
      default: 0
    },
    collInfo: {
      type: Object,
      default: null
    },
    detailInfo: {
      type: Object,
      default: null
    },
    branchId: {
      type: String,
      default: ''
    },
    branchName: {
      type: String,
      default: ''
    },
    useType: {
      type: String,
      default: ''
    },
    speciShow: {
      type: Boolean,
      default: false
    },
    productType: { // 商品类型
      type: Number,
      default: null
    }
  },
  data() {
    return {
      newSaleFlag: this.saleFlag,
      newCollInfo: this.collInfo,
      newDetailInfo: this.detailInfo,
      type: 'warning',
      value: 100
    }
  },
  computed: {
    newCartCount() {
      return this.cartCount
    }
  },
  watch: {
    saleFlag(newVal, oldVal) {
      if (newVal != oldVal) this.newSaleFlag = newVal
    },
    collInfo(newVal, oldVal) {
      if (newVal != oldVal) {
        this.newCollInfo = newVal
      }
    },
    detailInfo(newVal, oldVal) {
      this.newDetailInfo = newVal
    },
  },
  methods: {
    goCustomer() {
      const parmas = {
        name: this.newDetailInfo.skuName,
        url: this.newDetailInfo.imageInfos[0].imgUrl,
        imgUrl: '/shopDetail/index?spuCode=' + this.newDetailInfo.spuCode
      }
      // this.loginTest(() => uni.navigateTo({ url: '/customer/index' }))
      uni.navigateTo({ url: `/customer/index?name=${parmas.name}&url=${parmas.url}&imgUrl=${parmas.imgUrl}` })
    },
    loginTest(callBack) {
      // if (!this.vuex_loginStatus || !this.vuex_loginStatus) {
      //   const branchData = JSON.stringify({
      //     branchId: this.branchId,
      //     branchName: this.branchName
      //   })
      //   const callbackUrl = '/shopDetail/index'
      //   const params = {
      //     spuCode: this.newDetailInfo.spuCode
      //   }
      //   uni.navigateTo({
      //     url: `../login/login/codeLogin?callbackUrl=${callbackUrl}&urlParams=${JSON.stringify(params)}&registParams=${branchData}`
      //   })
      // } else {
      //   callBack()
      // }
      this.vuex_loginStatus ? callBack() : this.jumpToLoginPage()
    },
    // 跳转登录页
    jumpToLoginPage() {
      const params = {
        spuCode: this.detailInfo.spuCode,
        isFromLoagin: true
      }
      const branchData = JSON.stringify({ ...this.vuex_sharePushmanCompanyInfo })
      const callbackUrl = '/shopDetail/index'
      const urlParams = JSON.stringify(params)
      uni.navigateTo({
        url: `../login/login/codeLogin?callbackUrl=${callbackUrl}&urlParams=${urlParams}&registParams=${branchData}`
      })
    },
    CollectionShop() {
      const cannotAction = cannotActionGoodsValidate(this.productType, this.vuex_memberInfo?.accountType)
      if (cannotAction) return
      this.loginTest(() => this.$emit('CollectionShop', this.collInfo.collectId))
    },
    addCar() {
      const cannotAction = cannotActionGoodsValidate(this.productType, this.vuex_memberInfo?.accountType)
      if (cannotAction || this.newSaleFlag) return
      this.$emit('update:speciShow', true)
      //this.loginTest(() => this.$emit('update:speciShow', true))
      // if (!!this.useType) {
      //   this.$emit('update:speciShow', true)
      // } else {
      //   this.loginTest(() => this.$emit('addShopCar'))
      // }
    },
    shopCarPage() {
      this.loginTest(() => {
        uni.navigateTo({
          url: '/purchaseOrder/index'
        })
      })
    },
    buy() {
      const cannotAction = cannotActionGoodsValidate(this.productType, this.vuex_memberInfo?.accountType)
      if (cannotAction || this.newSaleFlag) return
      this.$emit('update:speciShow', true)
      //this.loginTest(() => this.$emit('update:speciShow', true))
      // if (!!this.useType) {
      //   this.$emit('update:speciShow', true)
      // } else {
      //   this.loginTest(() => this.$emit('buy'))
      // }
    },
  }
}
</script>

<style scoped lang="scss">
.shopFooter {
  .disableNone {
    opacity: 0.3;
  }
  .seize {
    width: 100%;
    height: 150rpx;
  }
  .footer {
    width: 100%;
    padding: 16rpx 32rpx 50rpx 32rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background:$uni-bg-color;
  }
  .operation{
    display: flex;
    view {
      margin-left: 54rpx;
      font-size: 20rpx;
      color: #808080;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      position: relative;
      image {
        width: 48rpx;
        height: 48rpx;
      }
      .icon-bottom{
        font-size: 48rpx;
        color: #808080;
      }
    }
    view:first-child {
      margin-left: 0rpx;
    }
  }
  .shopPay {
    display: flex;
  }
  .button {
    padding:0 16rpx;
    background: linear-gradient(132.3deg, rgba(250,199,102,1) 0%, rgba(239,180,29,1) 100%);
    height: 63rpx;
    line-height: 63rpx;
    color:$uni-bg-color;
    border-radius:$uni-border-radius-default;
  }
  .addCar {
    background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%) !important;
  }
}
</style>
